<template>
  <div style="width: 50%;height: 40vh;">
    <div ref="chart" style="width:100%;height:100%;"></div>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default ({
  methods: {
    getEchartData(opt) {
      const chartDom = this.$refs.chart;
      if (!chartDom) {
        console.log("未获取到对应的DOM元素");
        return;
      }
      if (echarts) {
        const myChart = echarts.init(chartDom);
        const option = opt
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    init(outline, online, customline) {
      this.getEchartData({
        title: {
          text: '直播电视',
          left: 'center',
          textStyle: {
            color: '#606060'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: 10,
          left: 'center',
        },
        series: [
          {
            name: '频道数',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: online, name: '已分发' },
              { value: customline, name: '自办节目' },
              { value: outline, name: '未分发' }
            ]
          }
        ]
      })
    }

  },

})
</script>

